import { Table } from 'antd';
import { FC, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useWindowSize } from 'react-use';

export interface DataType {
  data: any;
  total: number;
}

interface TableProps {
  columnData: any;
  getData: any; //  (data: any) => DataType; // 获取表格数据函数
  filterName?: string; // 筛选名称
  refresh?: boolean; // 刷新
  expandable?: any; //配置
}

const TreeTable: FC<TableProps> = ({ columnData, getData, refresh, expandable }) => {
  const id = useParams().id;
  const [dataSource, setDataSource] = useState<any>([]);
  const { width, height } = useWindowSize();
  const [scrollY, setScroll] = useState<number>();
  const [loading, setLoading] = useState<boolean>(true);
  useEffect(() => {
    if (width && height) {
      setScroll(height - 310);
    }
  }, [height, width]);

  const getDataList = async () => {
    const dataSource = await getData();
    setDataSource(dataSource);
    setLoading(false);
  };

  useEffect(() => {
    setLoading(true);
    getDataList();
  }, [id, refresh]);

  return (
    <Table
      scroll={{ x: '100%', y: scrollY }}
      columns={columnData}
      dataSource={dataSource}
      rowKey={row => row.id}
      loading={loading}
      expandable={expandable}
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: () => <div>共{dataSource.length}条</div>
      }}
    />
  );
};

export default TreeTable;
